<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入layui css -->
    <link href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <!-- 引入layui js -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <style>
        body {
            position: absolute;
            display: flex;
            width: 100%;
            height: 100%;
        }

        .MainBox {
            width: 50%;
            height: 60%;
            display: flex;
            margin: auto;
        }

        .buttons {
            width: 200px;
            height: 200px;
            margin: auto;
            border-radius: 50%;
            display: inline-flex;
            color: #59c2c5;
            box-shadow: 24px 24px 36px rgba(0, 0, 0, 0.2), -24px -24px 36px rgba(255, 255, 255, 1);
            transition: all .2s ease-out;
        }

        .buttons:hover {
            cursor: pointer;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
            0 0 0 rgba(255, 255, 255, 0.8),
            inset 24px 24px 40px rgba(0, 0, 0, 0.1),
            inset -24px -24px 40px rgba(255, 255, 255, 1);
        }

        .buttons:hover .contents {
            width: 90px;
            height: 25px;
            font-size: 22px;
            text-shadow: 0 0 10px #59c2c5, 0 0 20px #59c2c5, 0 0 30px #59c2c5, 0 0 40px #59c2c5;
        }

        .contents {
            width: 100px;
            height: 30px;
            margin: auto;
            font-size: 24px;
            justify-content: center;
            text-align: center;
            transition: all .2s ease-out;
        }
    </style>
</head>
<body>
<div class="MainBox">
    <div class=" buttons" onclick="sign('Sign.html')">
        <div class="contents">课堂签到</div>
    </div>
    <div class=" buttons" onclick="rob('Answer.html')">
        <div class="contents">课堂抢答</div>
    </div>
    <div class=" buttons" onclick="random('chooseStudent.html')">
        <div class="contents">课堂选人</div>
    </div>
</div>
</body>
<script>
    function sign(url) {
        layer.open({
            type: 2,
            title: '签到',
            shadeClose: false,
            shade: false,
            maxmin: false, //关闭最大化最小化按钮
            fixed: true,
            area: ['1440px', '900px'],
            content: url,
            end: function () {
                $.get('/user/userStatus', function (data) {
                    if (!data.status) {
                        window.location.href = '/';
                    }
                })
                $.get('/sign/signStatus', function (data) {
                    if (data) {
                        $.get('/sign/stopSign', function () {
                            alert('检测到你在关闭页面之前未停止签到,已自动停止签到');
                        })
                    }
                })
            }
        });
    }

    function rob(url) {
        layer.open({
            type: 2,
            title: '抢答',
            shadeClose: false,
            shade: false,
            maxmin: false, //关闭最大化最小化按钮
            fixed: true,
            area: ['1440px', '900px'],
            content: url,
            end: function () {
                //在这里放关闭弹出层之后要运行的代码
                $.get('/user/userStatus', function (data) {
                    if (!data.status) {
                        window.location.href = '/';
                    }
                })
                $.get('/studentRob/getStatus', function (data) {
                    if (data) {
                        $.get('/studentRob/stopAnswer', function () {
                        })
                        alert("检测到未停止抢答，已自动停止")
                    }
                })
            }
        });
    }

    function random(url) {
        layer.open({
            type: 2,
            title: '随机选人',
            shadeClose: false,
            shade: false,
            maxmin: false, //关闭最大化最小化按钮
            fixed: true,
            area: ['1440px', '900px'],
            content: url,
            end: function () {
                //在这里放关闭弹出层之后要运行的代码
                $.get('/user/userStatus', function (data) {
                    if (!data.status) {
                        window.location.href = '/';
                    }
                })
            }
        });
    }
</script>
</html>